<template>
  <div class="login-popup-vessel" v-show="showPopup">

    <div class="login-popup-box">

      <img src="../images/login_close.png" class="login-pic1" @click="closeModal"/>
      <span class="login-text">登录</span>

      <div class="login-popup-con">
        <div class="login-user-con">

          <div class="login-user-phone">
            <span class="user-input-text">手机号：</span>
            <input type="text" placeholder="请输入手机号" class="user-input-con" v-model="phone" maxLength="11"/>
          </div>
          <div class="login-user-pwd">
            <span class="user-input-text">密码：</span>
            <input type="password" placeholder="请输入密码" class="user-input-con" v-model="pwd" maxLength="16"/>
          </div>

          <div class="login-pwd-opt">
            <el-checkbox v-model="rememberChecked" class="remember-checkbox">记住密码</el-checkbox>

            <span class="forget-pwd" @click="openForgetPwdPage">忘记密码?</span>
          </div>

          <button type="button" class="login-user-btn" @click="toLogin">登录</button>

        </div>

        <div class="login-qr-code">
          <img src="../images/login_qr.png" class="login-pic2"/>
          <span class="app-down-text">扫一扫下载手机客户端 浏览体验更佳</span>
        </div>
      </div>

      <div class="register-account-text">
        <span @click="openRegisterPage">还没有账号？注册</span>
      </div>

    </div>
  </div>
</template>

<script>
  import md5 from 'js-md5';
  import {getStore, removeStore, setSessionStore, setStore} from "../config/util";
  import {Base64} from 'js-base64';
  import {checkPhone, checkPwd} from "../config/verify";
  import {Loading} from 'element-ui';
  import {baseUrl} from "../config/env";

  export default {
    props: {
      showModal: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        showPopup: false,
        rememberChecked: false,
        phone: "",
        pwd: ""
      }
    },
    created() {
      let pwd = getStore("localPwd");
      let phone = getStore("localPhone");
      if (pwd && phone) {
        this.phone = Base64.decode(phone);
        this.pwd = Base64.decode(pwd);
        this.rememberChecked = true;
      } else {
        this.phone = "";
        this.pwd = "";
      }
    },
    mounted() {
      this.showPopup = this.showModal;
    },
    methods: {
      closeModal() {
        this.showPopup = false;
        this.$emit("closeModal");
      },
      openRegisterPage() {
        this.$router.push("/register");
      },
      openForgetPwdPage() {
        this.$router.push("/forgetPwd");
      },
      toLogin() {//登录
        if (checkPhone(this.phone) && checkPwd(this.pwd, 2)) {
          let loading = Loading.service({
            text: '拼命加载中....',
            lock: false,
            background: 'rgba(0, 0, 0, 0.7)'
          });
          let data = {"phone": this.phone, "password": md5(this.pwd), "type": 0};

          this.axios.post(baseUrl + "/login/login_api", data).then((res) => {
            loading.close();
            let retObj = res.data;
            if (retObj.data.msg == "null") {
              this.$message({message: "用户名或密码错误", center: true, type: 'error'});
              return;
            } else if (retObj.data.msg == "error") {
              this.$message({message: "用户名或密码错误", center: true, type: 'error'});
              return;
            } else {
              this.showPopup = false;
              this.rememberPwd(); //记住密码
              setSessionStore("userToken", retObj.data.userToken); //用户令牌
              setSessionStore("userWand", Base64.encode(retObj.data.id)); //用户Id
              setSessionStore("nickName", retObj.data.userName); //用户Id
              this.$emit("loginBackCall", retObj.data.userName);
            }
          }).catch(() => {
            loading.close();
            this.$message({message: "网络异常", center: true, type: 'error'});
          });
        }
      },
      rememberPwd() {//记住密码
        let phone = this.phone;
        let pwd = this.pwd;
        if (this.rememberChecked) {
          setStore("localPhone", Base64.encode(phone));
          setStore("localPwd", Base64.encode(pwd));
        } else {
          removeStore("localPwd");
        }
      }
    },
    watch: {
      showModal(newVal, oldVal) {
        this.showPopup = newVal;
      },
      showPopup(val) {
        this.$emit('input', val);
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../assets/mixin";

  .login-popup-vessel {
    .fixed-center(fixed, 100, 0.5);
    .login-popup-box {
      display: flex;
      flex-direction: column;
      .wh(640px, 450px);
      background: rgba(252, 254, 255, 1);
      border-radius: 4px;
      .login-pic1 {
        margin-left: auto;
        padding-right: 16px;
        padding-top: 16px;
        .wh(20px, 20px);
      }
      .login-text {
        padding-left: 190px;
        padding-top: 5px;
        .size-color(20px, #333);
        font-weight: bold;
      }
      .login-popup-con {
        padding-top: 30px;
        display: flex;
        .login-user-con {
          position: relative;
          .wh(406px, 280px);
          border-right: 1px solid #EBEBEB;
          .login-user-phone {
            display: flex;
            flex-direction: column;
            margin-left: 66px;
          }
          .login-user-pwd {
            display: flex;
            flex-direction: column;
            margin-left: 66px;
          }
          .user-input-text {
            padding-top: 12px;
            padding-bottom: 8px;
            .size-color(16px, #4D4D4D);
          }
          .user-input-con {
            .wh(280px, 48px);
            padding-left: 14px;
            background: rgba(245, 245, 245, 1);
            border: 1px solid rgba(235, 235, 235, 1);
            border-radius: 4px;
          }
          .login-pwd-opt {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-left: 66px;
            margin-top: 15px;
            width: 294px;
            .remember-checkbox /deep/ .el-checkbox__label {
              padding-left: 12px;
              font-size: 14px;
              color: #4D4D4D;
            }
            .remember-checkbox /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
              color: #3CAFFF;
            }
            .forget-pwd {
              .size-color(14px, #3CAFFF);
              &:hover {
                cursor: pointer;
                color: #39A2ED;
              }
            }
          }
          .login-user-btn {
            .wh(294px, 48px);
            background: #3CAFFF;
            border-radius: 4px;
            .size-color(16px, #FFFFFF);
            text-align: center;
            line-height: 48px;
            margin-left: 66px;
            margin-top: 20px;
            &:hover {
              cursor: pointer;
              background: #39A2ED;
            }
          }
        }
        .login-qr-code {
          display: flex;
          flex-direction: column;
          margin-left: 35px;
          .login-pic2 {
            padding-top: 12px;
            .wh(144px, 144px);
          }
          .app-down-text {
            width: 140px;
            text-align: center;
            padding-top: 16px;
            .size-color(14px, #4D4D4D)
          }
        }
      }
      .register-account-text {
        padding-top: 44px;
        display: flex;
        justify-content: center;
        .size-color(14px, #3CAFFF);
        &:hover {
          cursor: pointer;
          color: #39A2ED;
        }
      }
    }
  }
</style>
